<template>
	<view>
		<navbar :title="$t('wode.withdrawalpwd')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view class="box">
			<view class="please">
				{{$t("wipass.please")}}
			</view>
			<u-message-input mode="bottomLine"
			:focus="setFocus"
			@blur='resetFocus'
			:breathe="true"
			:maxlength="6"
			inactiveColor="#ECECECFF"
			activeColor="#0F0F0EFF"
			font-size="32rpx"
			 @change="change"></u-message-input>
			<view class="confirm">
				<overbtn :btnText="$t('common.confirm')" @btnAction="onWithdrawConfirm" :loading="loading" :fontSize="24" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		userwithdraw
	} from '@/api/money.js'
	export default {
		data() {
			return {
				loading: false,
				setFocus: false,
				price: 0,
				bank_id: 0,
				password: ''
			};
		},
		onLoad(option) {
			this.price = option.price;
			this.bank_id = option.bank_id;
			setTimeout(() => {
				this.setFocus = true;
			}, 200);
		},
		methods: {
			resetFocus() {
				this.setFocus = false;
			},
			async onWithdrawConfirm() {
				if (this.password.length < 6) {
					return;
				}
				uni.showLoading({
					mask:true
				});
				try {
					let result = await userwithdraw({
						password: this.password,
						price: this.price,
						bank_id: this.bank_id
					})
					uni.hideLoading();
					uni.redirectTo({
						 url: '/pages/withdraw/crash'
					});
				} catch (error) {
					uni.hideLoading();
				}
			},
			change(e) {
				this.password = e;
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss">
	.box{
		height: 413rpx;
		background-color: #FFFFFFFF;
		overflow: hidden;
		.please{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 300;
			color: #0F0F0E;
			margin-top: 51rpx;
			margin-left: 77rpx ;
			line-height: 30rpx;
		}
		.confirm{
				width: 670rpx;
				height: 90rpx;
				margin: auto;
				margin-top: 100rpx;
				background: $u-type-primary;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #fff;
				line-height:90rpx;
				text-align: center;
		}
	}
	/deep/ .u-char-item {
		color: #0F0F0EFF!important;

		font-size: 32rpx;
	}
</style>
